<!doctype html>
<html>
  <head>
    <title>交互式绘图板 - Vue事件处理实践</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #f0f2f5;
        overflow: hidden;
      }

      .drawing-app {
        display: flex;
        height: 100vh;
      }

      .toolbar {
        width: 250px;
        background: white;
        border-right: 1px solid #e1e5e9;
        padding: 20px;
        overflow-y: auto;
      }

      .toolbar h3 {
        margin-bottom: 15px;
        color: #333;
        border-bottom: 2px solid #667eea;
        padding-bottom: 5px;
      }

      .tool-group {
        margin-bottom: 20px;
      }

      .tool-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: #555;
      }

      .tool-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 15px;
      }

      .tool-btn {
        padding: 10px;
        border: 2px solid #e1e5e9;
        background: white;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        font-size: 14px;
      }

      .tool-btn:hover {
        border-color: #667eea;
        background: #f8f9ff;
      }

      .tool-btn.active {
        border-color: #667eea;
        background: #667eea;
        color: white;
      }

      .color-palette {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
        margin-bottom: 15px;
      }

      .color-btn {
        width: 30px;
        height: 30px;
        border: 2px solid #ddd;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s ease;
      }

      .color-btn:hover {
        transform: scale(1.1);
      }

      .color-btn.active {
        border-color: #333;
        transform: scale(1.2);
      }

      .slider-group {
        margin-bottom: 15px;
      }

      .slider {
        width: 100%;
        margin: 10px 0;
      }

      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .action-btn {
        padding: 12px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
      }

      .action-btn.primary {
        background: #667eea;
        color: white;
      }

      .action-btn.secondary {
        background: #6c757d;
        color: white;
      }

      .action-btn.danger {
        background: #e74c3c;
        color: white;
      }

      .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .action-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
      }

      .canvas-container {
        flex: 1;
        position: relative;
        background: white;
        margin: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .canvas {
        display: block;
        cursor: crosshair;
      }

      .canvas.eraser {
        cursor:
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="20" height="20" fill="%23ff6b6b" rx="2"/></svg>')
            10 10,
          auto;
      }

      .status-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
      }

      .shortcuts-panel {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0.95);
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        max-width: 200px;
      }

      .shortcuts-panel h4 {
        margin-bottom: 10px;
        color: #333;
      }

      .shortcut-item {
        display: flex;
        justify-content: space-between;
        margin: 5px 0;
      }

      .shortcut-key {
        background: #e1e5e9;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
      }

      /* 学生模板特殊样式 */
      .template-header {
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
        color: white;
        padding: 10px 20px;
        text-align: center;
        font-weight: bold;
        border-bottom: 3px solid #1565C0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 任务1&2完成标识 -->
      <div class="template-header">✅ 任务1&2完成 - 工具选择 + 颜色选择功能 | Vue事件处理实践</div>

      <div class="drawing-app">
        <!-- 工具栏 -->
        <div class="toolbar">
          <h3>🎨 绘图工具</h3>

          <!-- 绘制工具 -->
          <div class="tool-group">
            <label>绘制工具</label>
            <div class="tool-buttons">
              <!-- ✅ 任务1完成: 添加工具选择的Vue事件处理 -->
              <button 
                v-for="tool in tools" 
                :key="tool.name"
                class="tool-btn" 
                :class="{ active: currentTool === tool.name }"
                @click="setTool(tool.name)"
              >
                {{ tool.icon }} {{ tool.label }}
              </button>
            </div>
          </div>

          <!-- 颜色选择 -->
          <div class="tool-group">
            <label>颜色选择</label>
            <div class="color-palette">
              <!-- ✅ 任务2完成: 添加颜色选择的Vue事件处理 -->
              <button 
                v-for="color in colors" 
                :key="color"
                class="color-btn" 
                :class="{ active: currentColor === color }"
                :style="{ backgroundColor: color }"
                @click="setColor(color)"
              ></button>
            </div>
            <!-- ✅ 任务2完成: 添加颜色选择器的Vue双向绑定 -->
            <input
              type="color"
              v-model="currentColor"
              style="width: 100%; height: 40px; border: none; border-radius: 5px"
            />
          </div>

          <!-- 画笔设置 -->
          <div class="tool-group">
            <div class="slider-group">
              <!-- TODO: 添加画笔大小的Vue双向绑定和显示 -->
              <label>画笔大小: {{ brushSize }}px</label>
              <input type="range" v-model="brushSize" min="1" max="50" class="slider" />
            </div>

            <div class="slider-group">
              <!-- TODO: 添加透明度的Vue双向绑定和显示 -->
              <label>透明度: {{ Math.round(opacity * 100) }}%</label>
              <input type="range" v-model="opacity" min="0.1" max="1" step="0.1" class="slider" />
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="tool-group">
            <label>操作</label>
            <div class="action-buttons">
              <!-- TODO: 添加按钮的Vue事件处理和状态控制 -->
              <button class="action-btn secondary" disabled>↶ 撤销 (Ctrl+Z)</button>
              <button class="action-btn secondary" disabled>↷ 重做 (Ctrl+Y)</button>
              <button class="action-btn primary">💾 保存 (Ctrl+S)</button>
              <button class="action-btn danger">🗑️ 清空 (Ctrl+Delete)</button>
            </div>
          </div>

          <!-- 统计信息 -->
          <div class="tool-group">
            <label>统计信息</label>
            <div style="font-size: 14px; color: #666">
              <!-- TODO: 添加动态统计信息的Vue数据绑定 -->
              <div>笔画数: {{ strokeCount }}</div>
              <div>操作数: 1/1</div>
              <div>画布大小: {{ canvasWidth }}×{{ canvasHeight }}</div>
            </div>
          </div>
        </div>

        <!-- 画布区域 -->
        <div class="canvas-container">
          <!-- TODO: 添加画布的鼠标事件处理 -->
          <canvas ref="canvas" class="canvas" width="800" height="600" tabindex="0"></canvas>

          <!-- 状态栏 -->
          <div class="status-bar">
            <div>
              <!-- ✅ 任务1&2完成: 添加动态状态信息的Vue数据绑定 -->
              工具: {{ getCurrentToolLabel() }} | 颜色: {{ currentColor }} | 大小: {{ brushSize }}px
            </div>
            <div>
              <!-- TODO: 添加鼠标位置和绘制状态的Vue数据绑定 -->
              坐标: ({{ mouseX }}, {{ mouseY }}) | 就绪
            </div>
          </div>

          <!-- 快捷键面板 -->
          <div class="shortcuts-panel">
            <h4>⌨️ 快捷键</h4>
            <div class="shortcut-item">
              <span>画笔</span>
              <span class="shortcut-key">B</span>
            </div>
            <div class="shortcut-item">
              <span>橡皮</span>
              <span class="shortcut-key">E</span>
            </div>
            <div class="shortcut-item">
              <span>直线</span>
              <span class="shortcut-key">L</span>
            </div>
            <div class="shortcut-item">
              <span>矩形</span>
              <span class="shortcut-key">R</span>
            </div>
            <div class="shortcut-item">
              <span>圆形</span>
              <span class="shortcut-key">C</span>
            </div>
            <div class="shortcut-item">
              <span>撤销</span>
              <span class="shortcut-key">Ctrl+Z</span>
            </div>
            <div class="shortcut-item">
              <span>重做</span>
              <span class="shortcut-key">Ctrl+Y</span>
            </div>
            <div class="shortcut-item">
              <span>保存</span>
              <span class="shortcut-key">Ctrl+S</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue

      createApp({
        setup() {
          // ===== 响应式数据定义 =====
          const canvas = ref(null)
          let ctx = null

          // 绘制状态
          const isDrawing = ref(false)
          const currentTool = ref('brush')
          const currentColor = ref('#000000')
          const brushSize = ref(5)
          const opacity = ref(1)
          const mouseX = ref(0)
          const mouseY = ref(0)
          const strokeCount = ref(0)

          // 画布尺寸
          const canvasWidth = ref(800)
          const canvasHeight = ref(600)

          // 历史记录（用于撤销/重做）
          const history = ref([])
          const historyIndex = ref(-1)

          // 绘制数据
          let startX = 0
          let startY = 0
          let lastX = 0
          let lastY = 0

          // ✅ 任务1完成: 工具定义
          const tools = [
            { name: 'brush', label: '画笔', icon: '🖌️' },
            { name: 'eraser', label: '橡皮', icon: '🧽' },
            { name: 'line', label: '直线', icon: '📏' },
            { name: 'rectangle', label: '矩形', icon: '⬜' },
            { name: 'circle', label: '圆形', icon: '⭕' },
            { name: 'text', label: '文字', icon: '📝' }
          ]

          // ✅ 任务2完成: 颜色调色板
          const colors = [
            '#000000',
            '#ffffff',
            '#ff0000',
            '#00ff00',
            '#0000ff',
            '#ffff00',
            '#ff00ff',
            '#00ffff',
            '#800000',
            '#008000',
            '#000080',
            '#808000',
            '#800080',
            '#008080',
            '#c0c0c0',
            '#808080',
            '#ff9999',
            '#99ff99'
          ]

          // ===== 计算属性 =====
          const canUndo = computed(() => {
            // TODO: 实现撤销判断逻辑
            return false
          })

          const canRedo = computed(() => {
            // TODO: 实现重做判断逻辑
            return false
          })

          // ✅ 任务1完成: 获取当前工具标签
          const getCurrentToolLabel = () => {
            const tool = tools.find(t => t.name === currentTool.value)
            return tool ? tool.label : '画笔'
          }

          // ===== 方法定义 =====

          // ✅ 任务1完成: 设置工具
          const setTool = toolName => {
            currentTool.value = toolName
            console.log('切换工具:', toolName)
          }

          // ✅ 任务2完成: 设置颜色
          const setColor = color => {
            currentColor.value = color
            console.log('切换颜色:', color)
          }

          // 保存画布状态
          const saveState = () => {
            // TODO: 实现状态保存逻辑（用于撤销/重做）
            console.log('保存状态')
          }

          // 开始绘制
          const startDrawing = event => {
            // TODO: 实现开始绘制逻辑
            // 提示：需要处理鼠标按下事件，设置绘制状态
            console.log('开始绘制', event)
          }

          // 绘制过程
          const draw = event => {
            // TODO: 实现绘制逻辑
            // 提示：需要根据当前工具进行不同的绘制操作
            console.log('绘制中', event)
          }

          // 结束绘制
          const stopDrawing = event => {
            // TODO: 实现停止绘制逻辑
            console.log('停止绘制', event)
          }

          // 更新鼠标位置
          const updateMousePosition = event => {
            // TODO: 实现鼠标位置更新逻辑
            console.log('鼠标位置', event)
          }

          // 撤销操作
          const undo = () => {
            // TODO: 实现撤销逻辑
            console.log('撤销操作')
          }

          // 重做操作
          const redo = () => {
            // TODO: 实现重做逻辑
            console.log('重做操作')
          }

          // 清空画布
          const clearCanvas = () => {
            // TODO: 实现清空画布逻辑
            console.log('清空画布')
          }

          // 保存图片
          const saveImage = () => {
            // TODO: 实现保存图片逻辑
            console.log('保存图片')
          }

          // 键盘事件处理
          const handleKeyboard = event => {
            // TODO: 实现键盘快捷键逻辑
            // 提示：B-画笔, E-橡皮, L-直线, R-矩形, C-圆形
            // Ctrl+Z撤销，Ctrl+Y重做，Ctrl+S保存等
            console.log('键盘事件', event.key, event.ctrlKey)
          }

          // ===== 生命周期 =====
          onMounted(() => {
            // 获取画布和上下文
            canvas.value = document.querySelector('canvas')
            ctx = canvas.value.getContext('2d')

            // TODO: 初始化画布设置
            // 提示：设置线条样式、填充样式等

            // TODO: 添加键盘事件监听
            // 提示：document.addEventListener('keydown', handleKeyboard);

            console.log('画布初始化完成')
          })

          // ===== 返回给模板使用的数据和方法 =====
          return {
            // 数据
            canvas,
            isDrawing,
            currentTool,
            currentColor,
            brushSize,
            opacity,
            mouseX,
            mouseY,
            strokeCount,
            canvasWidth,
            canvasHeight,
            history,
            historyIndex,
            tools,
            colors,

            // 计算属性
            canUndo,
            canRedo,

            // 方法
            getCurrentToolLabel,
            setTool,
            setColor,
            saveState,
            startDrawing,
            draw,
            stopDrawing,
            updateMousePosition,
            undo,
            redo,
            clearCanvas,
            saveImage,
            handleKeyboard
          }
        }
      }).mount('#app')
    </script>

    <!-- 学习提示 -->
    <script>
      console.log(`
✅ 任务1&2完成 - 工具选择 + 颜色选择功能

🎯 已实现功能：

【任务1 - 工具选择】
1. ✅ 工具数据定义 (tools数组)
2. ✅ v-for渲染工具按钮
3. ✅ @click事件处理工具切换
4. ✅ :class动态显示选中状态
5. ✅ setTool方法实现
6. ✅ 状态栏动态显示当前工具

【任务2 - 颜色选择】
1. ✅ 颜色数据定义 (colors数组)
2. ✅ v-for渲染颜色按钮
3. ✅ :style动态设置背景色
4. ✅ :class动态显示选中状态
5. ✅ @click事件处理颜色切换
6. ✅ v-model双向绑定颜色选择器
7. ✅ setColor方法实现
8. ✅ 状态栏动态显示当前颜色

🔧 关键技术点：
- v-for列表渲染
- @click事件绑定
- :class条件样式
- :style动态样式
- v-model双向绑定
- ref响应式数据
- 数组查找方法

📋 下一步：任务3 - 画笔设置功能
        `)
    </script>
  </body>
</html>